<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>zyplayer</title>
  <style>
    :root {
      background: #F7F7F7;
    }
    
    .loading-position {
      position: fixed;
      top: 50%;
      left: 50%;
      margin: -23px 0 0 -23px;
    }

    .loading {
      box-sizing: border-box;
      width: 46px;
      height: 46px;
      border: 6px solid #111113;
      border-radius: 50%;
      -webkit-animation: loading 1.5s linear infinite;
      animation: loading 1.5s linear infinite;
    }

    .green-box {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      left: 40px;
      top: -5px;
      position: absolute;
      background: #88d57e;
    }

    @media (prefers-color-scheme: dark) {
      :root {
        background-color: #111113;
      }
      .loading {
        border: 6px solid #F7F7F7;
      }
    }

    @keyframes loading {
      0% {
        transform: rotate(0deg);
      }

      50% {
        transform: rotate(180deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }
  </style>
</head>

<body>
  <button id="a11y-open-btn" tabindex="1" style="position: fixed; z-index: -1; left: 0px; top: 0px; width: 0px; height: 0px; opacity: 0;">开启读屏标签</button>
  <div id="a11y-live-assertive" aria-live="assertive" style="position: fixed; z-index: -1; left: 0px; top: 0px; width: 0px; height: 0px; opacity: 0;">读屏标签已关闭</div>
  <div class="loading-position loading">
    <div class="green-box"></div>
  </div>
  </div>
</body>

</html>